import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css'
import { BrowserRouter, Route, Link, Routes } from 'react-router-dom';
import Table from './components/Table';
import UseImperativeHandle from './components/useLayoutEffect'
// import Drag from './Drag';
// import Form from './Form';
// import Circle from './Circle';
ReactDOM.render(
  <div className="container">
    <div className="row">
      <div className="col-md-12" style={{ padding: 10 }}>
        <BrowserRouter>
          <ul className="nav nav-tabs">
            <li><Link to="/table">Table</Link></li>
            <li><Link to="/useImperativeHandle">useImperativeHandle</Link></li>
            <li><Link to="/form">Form</Link></li>
            <li><Link to="/circle">Circle</Link></li>
          </ul>
          <Routes>
            <Route path="/table" element={<Table />} />
            <Route path="/useImperativeHandle" element={<UseImperativeHandle />} />
            {/* <Route path="/drag" component={Drag} />
          <Route path="/form" component={Form} />
          <Route path="/circle" component={Circle} /> */}
          </Routes>
        </BrowserRouter>
      </div>
    </div>
  </div>,
  document.getElementById('root')
);